<template>
  <div>
    <div class="container">
      <div class="head-login">登录</div>
      <div class="input-item">
        <div class="input-block">
          <svg
            t="1664109578147"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2608"
            width="200"
            height="200"
          >
            <path
              d="M625.834667 691.2h-256c-18.773333 0-34.133333 15.36-34.133334 34.133333s15.36 34.133333 34.133334 34.133334h256c18.773333 0 34.133333-15.36 34.133333-34.133334s-15.36-34.133333-34.133333-34.133333z"
              p-id="2609"
              fill="#bfbfbf"
            ></path>
            <path
              d="M728.234667 102.4h-460.8c-56.490667 0-102.4 45.909333-102.4 102.4v614.4c0 56.490667 45.909333 102.4 102.4 102.4h460.8c56.490667 0 102.4-45.909333 102.4-102.4V204.8c0-56.490667-45.909333-102.4-102.4-102.4z m34.133333 716.8c0 18.773333-15.36 34.133333-34.133333 34.133333h-460.8c-18.773333 0-34.133333-15.36-34.133334-34.133333V204.8c0-18.773333 15.36-34.133333 34.133334-34.133333h460.8c18.773333 0 34.133333 15.36 34.133333 34.133333v614.4z"
              p-id="2610"
              fill="#bfbfbf"
            ></path>
          </svg>
          <input type="text" placeholder="手机号码" v-model="phone" />
        </div>

        <div class="input-block">
          <svg
            t="1664113620732"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2587"
            width="200"
            height="200"
          >
            <path
              d="M288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z"
              p-id="2588"
              fill="#cdcdcd"
            ></path>
          </svg>
          <input type="text" placeholder="密码" v-model="password" />
        </div>
      </div>

      <div class="form-tips">
        <div class="tipbox">
          <input type="checkbox" />
          <span>下次自动登录</span>
        </div>
      </div>

      <div class="loginbox" @click="getCode">
        <a href="javascript:;">登录</a>
      </div>

      <router-link to="/RegisterView" class="loginbox">
        <a href="javascript:;">注册</a>
      </router-link>

      <router-link tag="div" to="RecommendView" class="blank">返回</router-link>

      <div class="footbox">
        <p>其它登录方式</p>
        <svg
          t="1664116475636"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4094"
          data-spm-anchor-id="a313x.7781069.0.i7"
          width="200"
          height="200"
        >
          <path
            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m210.5 612.4c-11.5 1.4-44.9-52.7-44.9-52.7 0 31.3-16.2 72.2-51.1 101.8 16.9 5.2 54.9 19.2 45.9 34.4-7.3 12.3-125.6 7.9-159.8 4-34.2 3.8-152.5 8.3-159.8-4-9.1-15.2 28.9-29.2 45.8-34.4-35-29.5-51.1-70.4-51.1-101.8 0 0-33.4 54.1-44.9 52.7-5.4-0.7-12.4-29.6 9.4-99.7 10.3-33 22-60.5 40.2-105.8-3.1-116.9 45.3-215 160.4-215 113.9 0 163.3 96.1 160.4 215 18.1 45.2 29.9 72.8 40.2 105.8 21.7 70.1 14.6 99.1 9.3 99.7z"
            p-id="4095"
            data-spm-anchor-id="a313x.7781069.0.i6"
            class=""
            fill="#bfbfbf"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginCellphone } from "../api/home.js";
export default {
  data() {
    return {
      phone: "",
      password: "",
    };
  },

  methods: {
    getCode() {
      //1.验证手机号码
      console.log(this);
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      // 2.验证密码
      let pass = /^[a-zA-Z]\w{5,17}$/;
      if (!reg.test(this.phone) || !pass.test(this.password)) {
        this.$toast("请输入正确的手机号码");
        return;
      }
      // console.log("成功");

      getLoginCellphone({ phone: this.phone, password: this.password }).then(
        (data) => {
          console.log("登陆成功==>", data);

          // if(data.code == 200){
          //     window.localStorage.setItem("token",data.data.phone);
          //     window.localStorage.setItem("userId" ,data.data.password);
          //     this.$toast("登陆成功");
          //     this.$router.push("/PersonalCenter");
          // }else{
          //     this.$toast("请输入正确手机号码与密码");
          // }

          if (this.phone in data) {
            console.log(data[this.phone]);
            if (this.password == data[this.phone].password) {
              console.log("成功登录");
              window.localStorage.setItem("number", this.phone);
              this.$router.push("/RecommendView");
            } else {
              this.$toast("请输入正确手机号码与密码");
            }
          } else {
            console.log("不存在");
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.container {
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
  .head-login {
    padding: 20px 15px 9px 15px;
    color: #333333;
    font-size: 16px;
    font-weight: bold;
  }
  .input-item {
    display: flex;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    padding-left: 12px;
    background-color: #ffffff;
    padding-right: 12px;
    flex-direction: column;
  }
}
a {
  text-decoration: none;
}
html,
body {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
ul,
ol {
  list-style: none;
}
.input-item {
  .input-block {
    width: 100%;
    display: flex;
    height: 54px;
    line-height: 54px;
    background-color: #ffffff;
    align-items: center;
    border-bottom: 1px solid #eee;
    input {
      outline: none;
      border: 0px;
      font-size: 17px;
      color: #999999;
    }
    .icon {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
    &:nth-child(2) {
      border: 0px;
    }
  }
}
.form-tips {
  padding: 20px 15px;
  .tipbox {
    display: flex;
    align-items: center;
    img {
      height: 16px;
      width: 16px;
    }
    span {
      color: #666666;
      font-size: 16px;
      padding-left: 8px;
    }
  }
}
.loginbox {
  width: 100%;
  background-color: #ff9744;
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
  a {
    height: 54px;
    line-height: 54px;
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 0.3em;
  }
}
.tipsbox {
  padding: 20px 15px;
  display: flex;
  justify-content: space-between;
  a {
    color: #ff9744;
    color: 14px;
  }
}
.footbox {
  height: 98px;
  line-height: 98px;
  display: flex;
  justify-content: center;
  align-items: center;
  .icon {
    width: 20px;
    height: 20px;
  }
  p {
    color: #666666;
    font-size: 14px;
  }
}
.blank {
  width: 100%;
  padding-bottom: 224px;
  text-align: center;
}
</style>